<template>
  <div class="app-container">
    <div style="margin-bottom: 10px;width: 100%;" >
      <tip-title title="漏斗图" icon-name="icon-loudoutu_fuzhi"></tip-title>
      <div style="margin-bottom: 10px" class="flex-row">
        <div style="margin-left: 10px;" class="flex-row">
          <div style="margin-right: 10px" class="form-label font-size-14">查询日期</div>
          <el-date-picker
            v-model="dateRange"
            type="daterange"
            value-format="yyyy-MM-dd"
            format="yyyy-MM-dd"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期">
          </el-date-picker>
        </div>
        <div class="flex-row" style="margin-left: 10px">
          <el-button type="primary" @click="searchThrow"
          ><el-icon style="margin-right: 5px"><Search /></el-icon>查询</el-button
          >
          <div style="width: 10px"></div>
          <el-button @click="resetSearch"
          ><el-icon style="margin-right: 5px"><RefreshRight /></el-icon>重置</el-button
          >
        </div>
      </div>
      <div class="flex-row" style="justify-content: center">
        <div id="funnel" style="width:600px;height:600px"></div>
      </div>
    </div>
    <div style="margin-bottom: 10px">
      <tip-title title="柱状图" icon-name="icon-tubiao-zhuzhuangtu"></tip-title>
      <div style="margin-bottom: 10px" class="flex-row">
        <div style="margin-left: 10px;" class="flex-row">
          <div style="margin-right: 10px" class="form-label font-size-14">查询日期</div>
          <el-date-picker
            v-model="dateRange1"
            type="daterange"
            value-format="yyyy-MM-dd"
            format="yyyy-MM-dd"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期">
          </el-date-picker>
        </div>
        <div style="margin-left: 10px;" class="flex-row">
          <div style="margin-right: 10px" class="form-label font-size-14">招聘岗位</div>
          <el-select v-model="post" placeholder="请选择招聘岗位" filterable>
            <el-option v-for="(item,index) in selectList" :key="index" :value="item" :label="item"></el-option>
          </el-select>
        </div>
        <div class="flex-row" style="margin-left: 10px">
          <el-button type="primary" @click="searchThrow1"
          ><el-icon style="margin-right: 5px"><Search /></el-icon>查询</el-button
          >
          <div style="width: 10px"></div>
          <el-button @click="resetSearch1"
          ><el-icon style="margin-right: 5px"><RefreshRight /></el-icon>重置</el-button
          >
        </div>
      </div>
      <div class="flex-row" style="justify-content: center">
        <div id="pillar" style="width:50%;height:600px"></div>
      </div>
    </div>
    <div>
      <tip-title title="饼状图" icon-name="icon-bingzhuangtu"></tip-title>
      <div style="margin-bottom: 10px" class="flex-row">
        <div style="margin-left: 10px;" class="flex-row">
          <div style="margin-right: 10px" class="form-label font-size-14">查询日期</div>
          <el-date-picker
            v-model="dateRange2"
            type="daterange"
            value-format="yyyy-MM-dd"
            format="yyyy-MM-dd"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期">
          </el-date-picker>
        </div>
        <div class="flex-row" style="margin-left: 10px">
          <el-button type="primary" @click="searchThrow2"
          ><el-icon style="margin-right: 5px"><Search /></el-icon>查询</el-button
          >
          <div style="width: 10px"></div>
          <el-button @click="resetSearch2"
          ><el-icon style="margin-right: 5px"><RefreshRight /></el-icon>重置</el-button
          >
        </div>
      </div>
      <div class="flex-row" style="justify-content: center">
        <div id="bread" style="width:800px;height:800px"></div>
      </div>
    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts';
import { columnarList, funnelList, pieList,getGang } from '@/api/recruitment/index'
import { getFormatDate } from '@/utils/index'
import {listData} from '@/api/system/dict/data'
let myChart = null
let myChart1 = null
let myChart2 = null
export default {
  name: 'index',
  data(){
    return {
      funnelOption:{
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b} : {c}人'
        },
        legend: {
          data: ['沟通人数', '邀约人数', '初试人数', '复试人数', '录用人数','入职人数']
        },
        series: [
          {
            name: 'Expected',
            type: 'funnel',
            left: '10%',
            width: '80%',
            label: {
              show:false,
            },
            labelLine: {
              show: false
            },
            itemStyle: {
              opacity: 0.7
            },
            emphasis: {
              label: {
                show:false,
                position: 'inside',
                formatter: '{b}:{c}人'
              }
            },
            data: [
              { value: 0, name: '沟通人数',key:'goutong' },
              { value: 0, name: '邀约人数',key:'yaoyue' },
              { value: 0, name: '初试人数',key:'chushi' },
              { value: 0, name: '复试人数',key:'fushi' },
              { value: 0, name: '录用人数',key:'luyong' },
              { value: 0, name: '入职人数',key:'ruzhi' },
            ]
          },
        ]
      },
      pillarOption:{
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            data: ['沟通人数', '邀约人数', '初试人数', '复试人数', '录用人数', '入职人数'],
            axisTick: {
              alignWithLabel: true
            }
          }
        ],
        yAxis: [
          {
            type: 'value'
          }
        ],
        series: [
          {
            name: 'Direct',
            type: 'bar',
            barWidth: '20%',
            data: [
              {
                value:0,
                itemStyle: {
                  color: '#F0F4FC'
                },
                key:'goutong'
              },
              {
                value:0,
                itemStyle: {
                  color: '#8569CB'
                },
                key:'yaoyue'
              },
              {
                value:0,
                itemStyle: {
                  color: '#509863'
                },
                key:'chushi'
              },
              {
                value:0,
                itemStyle: {
                  color: '#D4B45B'
                },
                key:'fushi'
              },
              {
                value:0,
                itemStyle: {
                  color: '#D25D5A'
                },
                key:'luyong'
              },
              {
                value:0,
                itemStyle: {
                  color: '#EAE2FE'
                },
                key:'ruzhi'
              }
            ]
          }
        ]
      },
      breadOption:{
        tooltip: {
          trigger: 'item'
        },
        legend: {
          top:50,
        },
        series: [
          {
            name: 'Access From',
            type: 'pie',
            radius: '50%',
            label: {
              position: 'outside',
              formatter: '{b}: {c}%',
              color: '#000'
            },
            data: [
              { value: 0, name: '薪酬低' },
              { value: 0, name: '工作时间不符合' },
              { value: 0, name: '不能出差' },
              { value: 0, name: '联系不到本人' },
              { value: 0, name: '行业不符合' },
              { value: 0, name: '工作经验综合能力达不到要求' },
              { value: 0, name: '情绪不稳定抗压能力差态度差' },
              { value: 0, name: '爽约' },
              { value: 0, name: '提前取消面试邀约' },
              { value: 0, name: '通勤时间长' },
              { value: 0, name: '其他' },
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      },
      post:'',
      dateRange:[],
      dateRange1:[],
      dateRange2:[],
      selectList:[]
    }
  },
  created() {
    this.setDangMonth()
    this.dateRange1 = this.setDangYear()
    this.dateRange2 = this.setDangYear()
    this.getFunnelList()
    this.getColumnarList()


    listData({dictType:'recruitment_summary'}).then(res => {
      if(res.code == 200){
        res.rows.forEach((item,index) => {
          this.breadOption.series[0].data[index].name = item.dictValue
        })
        this.getPieList()
      }
    })
    getGang().then(res => {
      if(res.code == 200){
        this.selectList = res.data
      }
    })
  },
  mounted() {
    myChart = echarts.init(document.getElementById('funnel'));
    myChart.setOption(this.funnelOption);
    myChart1 = echarts.init(document.getElementById('pillar'));
    myChart1.setOption(this.pillarOption);
    myChart2 = echarts.init(document.getElementById('bread'));
    myChart2.setOption(this.breadOption);
  },
  methods:{
    setDangMonth(){
      const now = new Date();
      const year = now.getFullYear();
      const month = now.getMonth();
      // 创建当月第一天的Date对象
      const startDate = new Date(year, month, 1);
      // 创建当月最后一天的Date对象
      const endDate = new Date(year, month + 1, 0);
      this.dateRange = [getFormatDate('yearMonthSet',startDate,'-'), getFormatDate('yearMonthSet',endDate,'-')];
    },
    setDangYear(){
      const currentYear = new Date().getFullYear();
      // 今年 1 月 1 日
      const startDate = new Date(currentYear, 0, 1);
      // 今年 12 月 31 日
      const endDate = new Date(currentYear, 11, 31);
      return [getFormatDate('yearMonthSet',startDate,'-'), getFormatDate('yearMonthSet',endDate,'-')]
    },
    resetSearch(){
      //把默认值调成当月
      this.setDangMonth()
      this.getFunnelList()
    },
    resetSearch1(){
      this.post = ''
      this.dateRange1 = this.setDangYear()
      this.getColumnarList()
    },
    resetSearch2(){
      this.dateRange2 = this.setDangYear()
      this.getPieList()
    },
    searchThrow(){
      this.getFunnelList()
    },
    searchThrow1(){
      this.getColumnarList()
    },
    searchThrow2(){
      this.getPieList()
    },
    getFunnelList(){
      const params = {
        startDate:this.dateRange[0],
        endDate:this.dateRange[1]
      }
      funnelList(params).then(res => {
        if(res.code == 200){
          const keys = Object.keys(res.data)
          for(let i = 0; i < 1; i++){
            for(let key of keys){
              const index = this.funnelOption.series[i].data.findIndex(item => item.key == key)
              if(index != -1){
                this.funnelOption.series[i].data[index].value = res.data[key]
              }
            }
          }
          myChart.setOption(this.funnelOption)
        }
      })
    },
    getColumnarList(){
      const params = {
        post:this.post,
        startDate:this.dateRange1[0],
        endDate:this.dateRange1[1]
      }
      columnarList(params).then(res => {
        if(res.code == 200){
          const keys = Object.keys(res.data)
          for(let i = 0; i < 1; i++){
            for(let key of keys){
              const index = this.pillarOption.series[i].data.findIndex(item => item.key == key)
              if(index != -1){
                this.pillarOption.series[i].data[index].value = res.data[key]
              }
            }
          }
          myChart1.setOption(this.pillarOption)
        }
      })
    },
    getPieList(){
      const params = {
        startDate:this.dateRange2[0],
        endDate:this.dateRange2[1]
      }
      pieList(params).then(res => {
        if(res.code == 200){
          const keys = Object.keys(res.data)
          for(let i = 0; i < 1; i++){
            for(let key of keys){
              const index = this.breadOption.series[i].data.findIndex(item => item.name == key)
              if(index != -1){
                this.breadOption.series[i].data[index].value = res.data[key]
              }
            }
          }
          myChart2.setOption(this.breadOption)
        }
      })
    }
  }
}
</script>

<style scoped>

</style>
